<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <!-- 引入CSS和JS -->
    <th:block th:insert="~{/fixed/header::head}"></th:block>
</head>
<script>
    $(function (){
        //付款按钮点击事件
        $("#pay").click(function (){
            //获取页面数据，并去除空格
            let cid = $("#cid").text();
            let quantity = $("#quantity").text();
            let price = $("#price").text();
            let consignee = $.trim($("#consignee").val());
            let phone = $.trim($("#phone").val());
            let address = $.trim($("#address").val());
            //判断是否有空值
            if ("" != consignee && "" != phone && phone.length == 11 && "" != address){
                //封装数据
                var formData = new FormData;
                formData.append("cid",cid);
                formData.append("quantity",quantity);
                formData.append("price",price);
                formData.append("consignee",consignee);
                formData.append("phone",phone);
                formData.append("address",address);
                //向后端发送数据
                $.ajax({
                    url:"/orders/insert",
                    method:"POST",
                    data:formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            location.href = "/orders"
                        }else {
                            alert("订单创建失败")
                            location.href = "/index"
                        }
                    }
                })
            }else {
                alert("请填写正确用户名、电话和收货地址");
            }
        })
    })
</script>
<body>
<!-- 引入头部导航条 -->
<th:block th:insert="~{/fixed/headBar::headBar}"></th:block>

<!--霸屏标签-->
<header>
    <div class="hero-area section-bg2">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="slider-area">
                        <div class="slider-height2 slider-bg4 d-flex align-items-center justify-content-center">
                            <div class="hero-caption hero-caption2">
                                <h2>确认订单</h2>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb justify-content-center">
                                        <li class="breadcrumb-item"><a th:href="@{index}">Home</a></li>
                                        <li class="breadcrumb-item"><a href="#">Checkout</a></li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<main>
    <section class="checkout_area">
        <div class="container">
            <div class="row">
                <!--左侧表单框-->
                <div class="col-lg-8">
                    <h3>确认收货信息</h3>
                    <form class="row contact_form" novalidate="novalidate">
                        <!--收货人姓名-->
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="consignee" placeholder="收货人姓名"
                                   maxlength="10" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
                        </div>
                        <!--收货人电话号码-->
                        <div class="col-md-6 form-group p_star">
                            <input type="text" class="form-control" id="phone" placeholder="收货人电话"
                                   maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
                        </div>
                        <!--收货人详细地址-->
                        <div class="col-md-12 form-group p_star">
                            <textarea class="form-control" name="message" id="address" rows="3" style="height: 180px;"
                                      placeholder="详细地址，路名或街道名称，门牌号"></textarea>
                        </div>
                    </form>
                </div>
                <!--右侧表单框-->
                <div class="col-lg-4">
                    <div class="order_box">
                        <h2>确认订单</h2>
                        <ul class="list">
                            <li>
                                <a>
                                    购物车编号：<span id="cid" th:text="${data.cid}"></span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    商品名<span id="goodsName" th:text="${data.goodsName}"></span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    购买数量<span id="quantity" th:text="${data.quantity}"></span>
                                </a>
                            </li>
                        </ul>
                        <ul class="list list_2">
                            <li>
                                <a>
                                    总价<span id="price" th:text="${data.quantity} * ${data.goodsPrice}"></span><span>￥</span>
                                </a>
                            </li>
                        </ul>
                        <button id="pay" class="btn w-100">确认订单</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer>
    <!--引入底部导航条-->
    <th:block th:insert="~{/fixed/footBar::footBar}"></th:block>
    <!--JS、Bootstrap代码-->
    <th:block th:insert="~{/fixed/footer::foot}"></th:block>
</footer>
</body>
</html>